<template>
    <view class="components-account-popup-container">
		<view class="account-popup-title-content">选择账户</view>
		<!-- 遍历 两种类型 一个是支出 一个是收入 -->
		<view class="account-popup-content-container">
			<view :class="['account-popup-content-item-container', {'select-account': index == selectIndex}, {'not-select': index != selectIndex}]" v-for="(item, index) in accountList" :key="index" @click="selectAccount(item, index)" :style="{width: item.nameLength + 'rpx'}" >
				<view :class="['account-popup-content-pay-left-icon', 'iconfont', item.icon ]" :style="{color: item.iconColor}"></view>
				<view class="account-popup-content-pay-right-container">
					<view class="account-popup-content-pay-right-container-up-name">{{item.name + " " + item.money}}</view>
					<!-- <view class="account-popup-content-pay-right-container-down-money">{{item.money}}</view> -->
				</view>
			</view>
		</view>
    </view>
</template>

<script>
	import {checkStrType2} from '@/util/regular/regular.js';
    export default {
		name: 'billList',
		props: {
			accountList: {
				type: Array,
				default: () => [],
			},
			selectIndex: {
				type: Number,
			}
		},
		watch: {
		},
        data() {
            return {
				// accountList: [],								// 测试宽度使用
				type: ['pay', 'income'],
				list: [],
            }
        },
		methods: {
			/** 选择账户后回调
			 * @param {Object} item 账户对象
			 * @param {Object} index 索引
			 */
			selectAccount(item, index) {
				this.$emit("selectAccountCallback", item, index);
			},
			/**
			 * 初始化数据
			 */
			init() {
			}
		},
		created() {
			this.accountList.forEach(item => {
				item.nameLength = checkStrType2(item.name + item.money, 43, 28);
			})
		},
    }
</script>

<style lang="scss">
	.components-account-popup-container {
		width: 660rpx;
		// 后续改为由分类撑开，因为不知道有几个分类
		min-height: 700rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		
		.account-popup-title-content {
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-weight: bold;
		}
		
		.account-popup-content-container {
			margin-top: 20rpx;
			width: 100%;
			// display: grid;
			// grid-template-columns: repeat(3, 1fr);
			// gap: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			
			.account-popup-content-item-container {
				height: 80rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				// background-color: $themeBgcLightGreyColor;
				
				
				.account-popup-content-pay-left-icon {
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.account-popup-content-pay-right-container {
					width: 70%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					
					.account-popup-content-pay-right-container-up-name {
						font-size: 25rpx;
						text-align: left;
						font-weight: 300;
					}
					
					.account-popup-content-pay-right-container-down-money {
						font-size: 25rpx;
					}
				}
			}
		}
	}
	
	.select-account {
		background-color: $themeYellowColor;
	}
	
	.not-select {
		background-color: $themeBgcLightGreyColor;
	}
</style>
